<template>
  <div class="log_list" style="width:80%;">
      <el-card style="margin:-70px 0 20px 30px">
      <span style="font-size:14px;">日期查询</span>
            <el-date-picker v-model="value1" type="data" placeholder="Pick a day" style="margin-left:140px"></el-date-picker>
            <el-button :icon="Search" circle style="margin-left: 20px;"></el-button>
      </el-card>
      <el-timeline v-for="item in list" :key="item.id">
        <el-timeline-item timestamp="2018/4/3" placement="top" class="el-item">
          <el-card class="line-div mini">
              <span>用户：{{item.user}}</span>
              <span>操作内容: {{item.operation}}</span>
              <span>IP地址：{{item.ip}}</span>
          </el-card>
        </el-timeline-item>
      </el-timeline>
          <el-card class="line-div" style="margin-left:30px;width:97.7%;">
                <p style="margin-top: 10px;font-size:14px">页码</p>
               <el-pagination
    :page-size="8"
    :pager-count="8"
    layout="prev, pager, next"
    :total="1000"
  >
  </el-pagination>
          </el-card>
  </div>
</template>
<script setup>
import {Search} from '@element-plus/icons-vue'

const list = [
  {
    id:1,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },
    {
        id:2,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },
    {
        id:3,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },
    {
        id:4,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },  {
      id:5,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },  {
      id:6,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },  {
      id:7,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },  {
      id:8,
    user:"z曾伟",
    operation:"密码登录",
    ip:"192.168.1.29"
  },
];



</script>

<style>
.line-div{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0px;
  margin: 0px;
  height:60px;
  /* border:1px solid red; */
  
}

.line-div span{
  display: inline-block;
  width: 200px;
  margin-top:-20px;
  /* box-sizing: border-box; */
}

.mini{
  height:40px;
}

</style>